
Tracy Bianca
December 19 at 8:55 PM
You sent
Enter
You sent
Enter
You sent
Enter
You sent
Enter
You sent
0:12
Enter
You sent
<div class="banner">
<!-- Image Slider -->
<div class="images">
<img src="./website/pictures/hen.jpg" alt="Chicken Recipe 1">
<img src="./website/pictures/chick.jpg" alt="Chicken Recipe 2">
<img src="./website/pictures/eggs.jpg" alt="Chicken Recipe 3">
</div>
<!-- Text Overlay -->
<div class="text-overlay">
<h1>Explore All Of our</h1>
<h2>Contact Information</h2>
</div>
</div>
<section class="map-section">
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3913.6680645926926!2d121.13607238006054!3d14.746228636793196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397bb31a5149651%3A0xde8ddcc54ad70375!2sRodriguez%20Rizal!5e1!3m2!1sfil!2sph!4v1731259811290!5m2!1sfil!2sph"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
<div class="contact-container">
<div class="contact-info">
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Location</h4>
<p>AmityVille San Jose, Rodriguez Rizal</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Open Hours</h4>
<p>Monday-Saturday:<br>11:00 AM - 23:00 PM</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Call Us</h4>
<p>+93 977 446 464 646</p>
</div>
</div>
<div class="info-item">
<span class="icon">
</span>
<div>
<h4>Email Us</h4>
<p>info@example.com</p>
</div>
</div>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<input type="text" placeholder="Subject" required>
<textarea placeholder="Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<!-- Footer -->
<footer class="row text-left bg-honeycomb">
<div id="footer" class="section-p1 col-xs-12">
<div class="col">
<h4>Contact</h4>
<p><strong>Address:</strong> AmityVille San Jose, Rodriguez Rizal</p>
<p><strong>Phone:</strong> +93 977 446 464 646</p>
<p><strong>Hours:</strong> 9:00 - 6:00 pm, MON - Sat</p>
<div class="Follow">
<div class="icon"><strong>Follow us</strong></div>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<div class="col-about">
<h4>About</h4>
<a href="../about/about.html">About us</a>
<a href="#">Privacy policy</a>
<a href="#">Terms & Conditions</a>
<a href="../contact/contact.html">Contact us</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>Download our app</p>
<img src="./website/pictures/icons8-playstore-24.png" alt="Play Store">
<p>QR code for the app:</p>
<img class="qw" src="./website/pictures/icons8-qr-50.png" alt="QR Code">
</div>
<div class="copyright col-xs-12">
<p>©2024, Website Activity (4H) Group 7- HTML CSS PHP JS Advertisement</p>
</div>
</footer>
</body>
</html>
Enter
You sent
.banner {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: 8px;
}
/* Image Slider */
.images {
position: relative;
width: 100%;
height: 100%;
}
.images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation: fade 12s infinite;
}
/* Fade Animation for Each Image */
.images img:nth-child(1) {
animation-delay: 0s;
}
.images img:nth-child(2) {
animation-delay: 4s;
}
.images img:nth-child(3) {
animation-delay: 8s;
}
/* Text Overlay */
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 5px;
}
.text-overlay h1 {
font-size: 2rem;
margin-bottom: 10px;
}
.text-overlay h2 {
font-size: 4rem;
color: #fff;
margin-bottom: 10px;
}
@keyframes slideIn {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.text-overlay h1, .text-overlay h2 {
animation: slideIn 2s ease-out forwards;
}
.text-overlay h1 {
animation-delay: 0s;
}
.text-overlay h2 {
animation-delay: 0.5s; /* Delay second text for a staggered effect */
}
/* Keyframes for Fade Animation */
@keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
33% { opacity: 1; }
43% { opacity: 0; }
100% { opacity: 0; }
}
.map-container {
width: 100%;
border: 2px solid #333;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 10px; /* Add padding */
}
.map-container iframe {
width: 100%;
height: 60vh; /* Make height responsive */
border: none;
}
.map-section {
width: 100%;
position: relative;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
.map-container {
border-radius: 4px; /* Reduce border radius */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce box shadow */
}
}
.order-container{
background-color: black; /* Green background */
color: white;
padding: 40px 20px;
text-align: center;
}
.order-container h2 {
font-size: 4rem;
margin-bottom: 20px;
color: #486a5a;
font-family: 'Amatic Sc';
font-weight: bolder;
}
.order-container p {
font-size:2rem;
margin-bottom: 20px;
color: #ffc107;
}
.contact-info {
font-size: 1.1rem;
}
.contact-info ul {
list-style-type: none;
padding: 0;
}
.contact-info ul li {
display: inline;
margin: 0 10px;
}
.contact-info ul li a {
color: #486a5a;
text-decoration: none;
font-weight: bold;
font-size: large;
}
.contact-info ul li a:hover {
text-decoration: underline;
}
Enter
You sent
<link rel="icon" href="./website/pictures/android-chrome-512x512.png" type="image/x-icon">
Enter
You sent
Enter
Write to
Chat info
Customize chat
Media, files and links
Media
Files
Links




















.jpg)
















.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)

.jpg)